<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>积分商品管理</title>
    <div th:include="includeJs::bootstrap_js"></div>
    <div th:include="includeJs::layui_js"></div>
    <script src='https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key'></script>
    <script>
        tinymce.init({
            selector: '#mytextarea'
        });

    </script>
</head>
<body>
<div class="container-scroller d-flex">
    <div th:replace="includeJs::admin_leftNav"></div>
    <div class="container-fluid page-body-wrapper">
        <div th:replace="includeJs::admin_nav"></div>
        <div class="main-panel">
            <div class="content-wrapper">
                <div id="addWin" style="display: none">
                    <form id="addfrom" class="layui-form">
                        <table align="center" style="margin-top: 5%;border-collapse: separate;border-spacing: 10px 30px;">
                            <tr>
                                <td>商品名称:</td>
                                <td>
                                    <input type="text" name="goodsName" required lay-verify="title" placeholder="商品名称" autocomplete="off" class="layui-input">
                                </td>
                                <td>商品类型:</td>
                                <td>
                                    <select name="goodsType" lay-verify="required">
                                        <option value="">请选择商品类型</option>
                                        <option value="1">电子产品</option>
                                        <option value="2">食用产品</option>
                                        <option value="3">日常用品</option>
                                        <option value="4">红包兑换</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>商品价格:</td>
                                <td>
                                    <input type="number" name="goodsPrice" lay-verify="required|number" placeholder="商品价格" autocomplete="off" class="layui-input">
                                </td>
                                <td>商品图样:</td>
                                <td>
                                    <input type="text" lay-verify="required"  name="goodsImage" hidden id="img_url" />
                                    <button type="button" id="upImage" class="layui-btn layui-btn-danger" ><i class="layui-icon"></i>上传图片</button>
                                </td>
                            </tr>
                            <tr>
                                <td>库存数量:</td>
                                <td>
                                    <input type="number" name="goodsStock" required lay-verify="number" placeholder="输入库存" autocomplete="off" class="layui-input">
                                </td>
                                <td colspan="2" style="text-align: center;">
                                    <img class="huixian" width="100px" src="" alt="" />
                                </td>
                            </tr>
                            <tr>
                                <td>商品简介:</td>
                            </tr>
                            <tr>
                                <td align="center"  colspan="5" >
                                        <textarea name="goodsSynopsis" placeholder="请输入内容" class="layui-textarea"></textarea>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" colspan="4">
                                    <button lay-submit lay-filter="addGoods" id="addGoods" class="layui-btn layui-btn-warm" ><i class="layui-icon layui-icon-ok" ></i>提交</button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div id="editWin" style="display: none">
                    <form id="editfrom" class="layui-form" lay-filter="editfrom">
                        <table align="center" style="margin-top: 5%;border-collapse: separate;border-spacing: 10px 30px;">
                            <tr>
                                <input type="text" name="goodsId" required lay-verify="title" hidden autocomplete="off" class="layui-input">
                                <td>商品名称:</td>
                                <td>
                                    <input type="text" name="goodsName" required lay-verify="title" placeholder="商品名称" autocomplete="off" class="layui-input">
                                </td>
                                <td>商品类型:</td>
                                <td>
                                    <select name="goodsType" lay-verify="required">
                                        <option value="">请选择商品类型</option>
                                        <option value="1">电子产品</option>
                                        <option value="2">食用产品</option>
                                        <option value="3">日常用品</option>
                                        <option value="4">红包兑换</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>商品价格:</td>
                                <td>
                                    <input type="number" name="goodsPrice" lay-verify="required|number" placeholder="商品价格" autocomplete="off" class="layui-input">
                                </td>
                                <td>商品图样:</td>
                                <td>
                                    <input type="text" lay-verify="required"  name="goodsImage" hidden id="edit_img_url" />
                                    <button type="button" id="edit_upImage" class="layui-btn layui-btn-danger" ><i class="layui-icon"></i>上传图片</button>
                                </td>
                            </tr>
                            <tr>
                                <td>库存数量:</td>
                                <td>
                                    <input type="number" name="goodsStock" required lay-verify="number" placeholder="输入库存" autocomplete="off" class="layui-input">
                                </td>
                                <td colspan="2" style="text-align: center;">
                                    <img class="huixian" width="100px" src="" alt="" />
                                </td>
                            </tr>
                            <tr>
                                <td>商品简介:</td>
                            </tr>
                            <tr>
                                <td align="center"  colspan="5" >
                                    <textarea name="goodsSynopsis" placeholder="请输入内容" class="layui-textarea"></textarea>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" colspan="4">
                                    <button lay-submit lay-filter="editGoods" id="editGoods" class="layui-btn layui-btn-warm" ><i class="layui-icon layui-icon-ok" ></i>提交</button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <table class="layui-hide" id="goods" lay-filter="goods"></table>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button lay-event="addGoodsBtn" class="layui-btn layui-btn-sm" ><i class="layui-icon layui-icon-add-1" style="font-size: 30px;"></i>添加商品</button>
    </div>
</script>
<script type="text/html" id="toolDemo">
    <button lay-event="update" class="layui-btn layui-btn-sm layui-btn-danger" ><i class="layui-icon layui-icon-edit"></i>修改</button>
    <button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger" ><i class="layui-icon layui-icon-delete"></i>删除</button>
</script>
<script>
    layui.use([ 'element', 'table', 'layer', 'form' ,'laydate','upload','layedit'],function() {
        var element = layui.element;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var layedit = layui.layedit;

        table.render({
            elem: '#goods'
            ,url:'/admin/goods'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,title: '商品管理表'
            ,cols: [
                [
                {field:'goodsId', title:'ID', width:80, fixed: 'left', sort: true}
                ,{field:'goodsName', title:'商品名称', width:120}
                ,{field:'goodsType', templet:function (d) {
                        if (d.goodsType === [[${T(com.ddf.publics.tool.Constant).ELECTRONIC_PRODUCT}]]) {
                            return '电子产品'
                        }else if(d.goodsType === [[${T(com.ddf.publics.tool.Constant).EDIBLE_PRODUCTS}]]) {
                            return '食用产品'
                        }else if(d.goodsType === [[${T(com.ddf.publics.tool.Constant).DAILY_PRODUCTS}]]){
                            return '日常产品'
                        }else if(d.goodsType === [[${T(com.ddf.publics.tool.Constant).RED_PRODUCTS}]]){
                            return '红包产品'
                        }
                    },title:'商品类型', width:120}
                ,{field:'goodsPrice', title:'商品价格', width:150, sort: true}
                ,{field:'releaseTime', title:'发售时间',templet:'<div>{{layui.util.toDateString(d.releaseTime,"yyyy-MM-dd HH:mm:ss")}}</div>', width:200}
                ,{field:'goodsImage', title:'物品图样',templet:'<div><img width="100px" height="100px" src="\\{{d.goodsImage}}" /></div>',width:100}
                ,{field:'goodsSynopsis', title:'商品简介', width:150, sort: true}
                ,{field:'goodsStock', title:'商品库存', width:120}
                ,{field:'goodsSell', title:'商品出售数量', width:150, sort: true}
                ,{toolbar:'#toolDemo',fixed: 'right', title:'操作', width:200}
            ]
            ]
            ,page: true
            ,page: {limit:10,page:1,limits:[10,30,50,100],layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']}
        });

        table.on('toolbar(goods)',function (obj) {
            if(obj.event == 'addGoodsBtn'){
                layer.open({
                    type: 1,
                    title:'添加商品',
                    skin: 'layui-layer-demo', //样式类名
                    closeBtn: 1, //不显示关闭按钮
                    area: ['700px', '600px'],
                    fixed: false, //不固定
                    maxmin: true,
                    shadeClose: false, //开启遮罩关闭
                    content: $('#addWin'),
                    cancel:function(index, layero){
                        $("#addfrom")[0].reset();
                        layui.form.render();
                        layer.close(index);
                        table.reload('goods');
                    }
                });
            }
        });
        form.on("submit(addGoods)",function (data) {
            $.ajax({
                url:'/admin/addGoods',
                data:data.field,
                type:'POST',
                dadaType:'text',
                success:function(data){
                    if(data == 'yes') {
                        layer.msg("添加成功");
                    }else {
                        layer.msg("添加失败");
                    }

                }
            });
        });
        table.on('tool(goods)',function (obj) {
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确认要删除吗？', function(index){
                    $.post("/admin/delGoods",{id:data.goodsId},function (d) {
                        if(d == 'yes'){
                            layer.msg('删除成功');
                            table.reload('goods');
                        }else{
                            layer.msg('删除失败');
                            table.reload('goods');
                        }
                    });
                    table.reload('goods');
                    layer.close(index);
                });
            }else if(obj.event === 'update'){
                form.val("editfrom", {
                    'goodsId':data.goodsId
                    ,"goodsName": data.goodsName // "name": "value"
                    ,"goodsType": data.goodsType
                    ,"goodsPrice": data.goodsPrice
                    ,"goodsImage": data.goodsImage
                    ,"goodsStock":data.goodsStock
                    ,"goodsSynopsis": data.goodsSynopsis
                });
                $(".huixian").attr("src","/"+data.goodsImage)
                layer.open({
                    type: 1,
                    title:'修改商品',
                    skin: 'layui-layer-demo', //样式类名
                    closeBtn: 1, //不显示关闭按钮
                    area: ['700px', '600px'],
                    fixed: false, //不固定
                    maxmin: true,
                    shadeClose: false, //开启遮罩关闭
                    content: $('#editWin'),
                    cancel:function(index, layero){
                        $("#editfrom")[0].reset();
                        layui.form.render();
                        layer.close(index);
                    }
                });
                form.on("submit(editGoods)",function (data) {
                    $.ajax({
                        url:'/admin/editGoods',
                        data:data.field,
                        type:'POST',
                        dadaType:'text',
                        success:function(data){
                            if(data == 'yes') {
                                layer.msg("修改成功");
                                location.reload();
                            }else {
                                layer.msg("修改失败");
                                location.reload();
                            }

                        }
                    });
                    return false;
                });
            }
        });

        upload.render({
            elem: '#upImage'
            ,url: "/admin/uploadImg?type=1"
            ,accept:"images"
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                //console.log(res.url);

                $("#img_url").val(res.url);
                $(".huixian").attr("src","/"+res.url);
            }
        });
        upload.render({
            elem: '#edit_upImage'
            ,url: "/admin/uploadImg?type=1"
            ,accept:"images"
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                //console.log(res.url);

                $("#edit_img_url").val(res.url);
                $(".huixian").attr("src","/"+res.url);
            }
        });
    });
</script>
</html>